<template>
	<div class="app-container" v-loading="formLoading">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <div>
        <el-select v-model="listQuery.selectstatus" placeholder="请选择状态" clearable style="width: 200px">
            <el-option label="禁用" value="-1" key="-1"></el-option>
            <el-option label="启用" value="1" key="1"></el-option>
        </el-select>
        <el-input v-model="listQuery.searchName" @keyup.enter.native="getStaffLists" placeholder="请输入角色名称" style="width: 250px"></el-input>
        <el-button class="search" type="success" icon="el-icon-search" @click="getStaffLists">搜索</el-button>
      </div>
  		<div>
        <el-button type="danger" icon="el-icon-delete" @click="batchDele">批量删除</el-button>
  			<el-button type="primary" icon="el-icon-plus" @click="linkToAdd">添加新角色</el-button>
  		</div>
    </div>

		<div>
			<el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="id" fit highlight-current-row style="width: 100%;color:#222;font-size: 12px;font-family: PingFangSC-Regular;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" label="全选" width="70">

        </el-table-column>
			 	<el-table-column align="center" label="角色名称" width="170">
          <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column  width="170"  align="center" label="姓名">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
          <el-table-column  width="170" align="center" label="手机号">
            <template slot-scope="scope">
              <span>{{scope.row.phone}}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="状态">
            <template slot-scope="scope">
              <b v-show="scope.row.status==-1" @click="openUse(1, scope.row.id)">禁用</b>
              <b v-show="scope.row.status==1" @click="closeUse(-1, scope.row.id)" class="red">启用</b>
            </template>
        </el-table-column>
        <el-table-column  width="300" align="center" label="操作">
          <template slot-scope="scope">
            <b @click="showPassword(scope.row.id)">修改密码</b>
            <span class="color-409">|</span>
            <b @click="linkToEdit(scope.row.id)">修改权限</b>
            <span class="color-409">|</span>
            <b @click="openDelete(scope.$index, scope.row.id)">删除</b>
          </template>
        </el-table-column>
		  </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
		</div>
    <div v-show="isShowEditPassword">
      <p class="filter"></p>
      <div class="addBox">
        <h3 class="fixTitle">
          <span>修改密码</span>
          <p>
            <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
          </p>
        </h3>
        <el-form :model="postForm" :rules="rules" ref="postForm" label-width="150px" label-position="right" style="overflow:hidden;margin-top:40px;padding: 10px 20px;">
          <el-form-item label="新的密码：" prop="newPassword">
            <el-input v-model="postForm.newPassword" placeholder="请输入新的密码" class="width300"></el-input>
          </el-form-item>
          <el-form-item label="确认新的密码：" prop="newPassword1">
            <el-input v-model="postForm.newPassword1" placeholder="请输入确认新的密码"  class="width300"></el-input>
          </el-form-item>
          <el-form-item label="您的登录密码：" prop="loginPwd">
            <el-input v-model="postForm.loginPwd" placeholder="请输入您的登录密码" class="width300"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
            <el-button type="info" @click="close">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
	</div>
</template>
<script>
import { lists, changeStaffStatus, deleteStaff, changePassword } from '@/api/permission'
const postForm = {
  adminId: 0,
  loginPwd: '',
  newPassword: '',
  newPassword1: ''
}
const rules = {
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  newPassword1: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }],
  loginPwd: [{ required: true, message: '请再次输入原密码', trigger: 'blur' }]
}
export default {
  components: {
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      formLoading: false,
      btnLoading: false,
      listQuery: {
        selectstatus: '', // 选择的状态
        searchName: '', // 搜索的名称
        page: 1,
        limit: 10,
        currentPage: 1,
        total: null
      },
      isOpenUse: false,
      isCloseUse: false,
      multipleSelection: [], // 选择的数据
      isShowEditPassword: false,
      tableData: [ // 表格数据
      ]
    }
  },
  methods: {
    getStaffLists() {
      this.formLoading = true
      lists(this.listQuery).then(res => {
        this.formLoading = false
        if (res.data.statusCode == 200) {
          this.tableData = res.data.data.data
          this.listQuery.total = res.data.data.total
        }
      }).catch(error => {
        this.formLoading = false
        console.log(error)
      })
    },
    showPassword(adminId) {
      this.postForm.adminId = adminId
      this.isShowEditPassword = true
    },
    handleSelectionChange(object) {
      this.multipleSelection = []
      for (var key in object) {
        this.multipleSelection.push({ adminId: object[key].id })
      }
    },
    batchDele() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'info',
          message: '请选择要删除的用户'
        })
        return
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length > 0) {
          deleteStaff(this.multipleSelection).then(res => {
            if (res.data.statusCode == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getStaffLists()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openDelete(index, id) { // 弹出删除框
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteStaff([{ adminId: id }]).then(res => {
          if (res.data.statusCode == 200) {
            this.formLoading = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getStaffLists()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        }).catch(error => {
          this.formLoading = false
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getStaffLists()
    },
    openUse(s, id) { // 启用
      this.formLoading = true
      changeStaffStatus({ status: s, adminId: id }).then(res => {
        if (res.data.statusCode == 200) {
          this.formLoading = false
          this.$message({
            type: 'success',
            message: '更改成功!'
          })
          this.getStaffLists()
        } else {
          this.formLoading = false
          this.$message({
            type: 'error',
            message: '更改失败!'
          })
        }
      }).catch(error => {
        this.formLoading = false
        console.log(error)
      })
      this.isCloseUse = true
      this.isOpenUse = false
    },
    closeUse(s, id) { // 禁用
      this.formLoading = true
      changeStaffStatus({ status: s, adminId: id }).then(res => {
        if (res.data.statusCode == 200) {
          this.formLoading = false
          this.$message({
            type: 'success',
            message: '更改成功!'
          })
          this.getStaffLists()
        } else {
          this.formLoading = false
          this.$message({
            type: 'error',
            message: '更改失败!'
          })
        }
      }).catch(error => {
        this.formLoading = false
        console.log(error)
      })
      this.isCloseUse = false
      this.isOpenUse = true
    },
    linkToAdd() {
      this.$router.push({ path: `/shopManage/createPermission` })
    },
    linkToEdit(id) {
      this.$router.push({ path: `/shopManage/editPermission/${id}` })
    },
    submitForm() {
      if (this.postForm.newPassword == this.postForm.newPassword1) {
      	this.$refs.postForm.validate(valid => {
      	  if (valid) {
            this.formLoading = true
            changePassword(this.postForm).then(res => {
              if (res.data.statusCode == 200) {
                this.formLoading = false
                this.$message({
                  message: '密码修改成功！',
                  type: 'success'
                })
                this.close()
              }
            }).catch(error => {
              this.formLoading = false
              console.log(error)
            })
      	  } else {
      	    console.log('error submit!')
            return false
      	  }
      	})
      } else {
        this.$message({
          message: '密码不一致！',
          type: 'error'
        })
      }
    },
    close() {
      this.isShowEditPassword = false
      this.postForm = Object.assign({}, postForm);

    }
  },
  created() {
    this.getStaffLists()
  },
  mounted() {
    this.listQuery.total = this.tableData.length
  }
}
</script>

<style scoped>
	p,h3{ margin: 0;}
  .fixTitle{
    width: 500px;
    padding-left: 20px;
  }
  .addBox {
		width: 500px;
		height: 350px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 35%;
		top: 25%;
    z-index: 120;
  }
  .red{
    color: red;
  }
</style>
